<!-- 社群内容 -->
<template>
	<view class="">
		<!-- 社群数据 -->
		<view class="pages-card m-20 m-auto ">
			<view class="row-box mb-30">
				<view class="flex align-items-center">
					<text class="fc-3 fw-6">社群数据</text>
					<text class="iconfont ml-10 mr-10 fc-9 ">&#xe677;</text>
				</view>
				<view class="flex align-items-center">
					<text class=" fc-9">每30分钟更新一次</text>
				</view>
			</view>

			<view class="profiling-gird">
				<view class="gird-item fcc" v-for="(item,index) in profiling" :key="index">
					<view class="gird-item-title">
						{{item.title}}
					</view>
					<view class="gird-item-value fc-ac">
						{{item.value}}
					</view>
				</view>
			</view>
		</view>
		<!-- 社群质量分析 -->
		<view class="pages-card m-auto mb-20">
			<view class="row-box mb-30">
				<view class="flex">
					<text class="fc-3">社群质量分析</text>
				</view>
				<picker @change="bindPickerChange" :value="range" :range="typeRange">
					<view class="change-type pl-10 pr-10 flex align-items-center justify-content-center">
						<text class="fc-9 fs-sm out-1">{{typeRange[range]}}</text>
						<text class="iconfont fc-9 fs-sm ml-10">&#xe685;</text>
					</view>
				</picker>
			</view>
			<view class="">
				<view class="flex align-items-center time-rom-box">
					<view class="fc-9 mr-20">
						时间类型
					</view>
					<p-time-tab :list="timeList" :index='timeIndex' noShow bgcolor='#F4F4F4' mr='10rpx' />
				</view>
				<view class="flex  align-items-center  time-rom-box">
					<view class="fc-9 mr-20">
						统计时间
					</view>
					<view class="time-text flex-1 pl-20">
						2025/03/18
					</view>
				</view>
			</view>
			<view class="ECharts-box">
				<view ref="chartContainer" id="chartContainer" class="chartContainer"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				profiling: [],
				range: 0,
				typeRange: ['选择数据类型选择数据类型A', '选择数据类型B', '选择数据类型C', ],
				chart: '',
				timeIndex: 0

			};
		},
		created() {
			this.setProfiling()
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				const chartContainer = document.getElementById('chartContainer') //this.$refs.chartContainer
				this.chart = this.$echarts.init(chartContainer)

				const option = {
					// tooltip: {
					// 	trigger: 'item'
					// },
					// legend: {
					// 	top: '5%',
					// 	left: 'center'
					// },
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 2
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: 40,
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [{
								value: 1048,
								name: 'Search Engine'
							},
							{
								value: 735,
								name: 'Direct'
							},
							{
								value: 580,
								name: 'Email'
							},
							{
								value: 484,
								name: 'Union Ads'
							},
							{
								value: 300,
								name: 'Video Ads'
							}
						]
					}]
				}
				this.chart.setOption(option)
			},
			async setProfiling() {
				// await
				this.profiling = [{
						title: '社群人数',
						value: '8888'
					},
					{
						title: '有成交社群',
						value: '8888'
					},
					{
						title: '社群订单数',
						value: '8888'
					},
					{
						title: '销售总额',
						value: '$654.32'
					},
					{
						title: '成交顾客人数',
						value: '8888'
					},
				]
			},
		},
		beforeDestroy() {
			if (this.chart) {
				this.chart.dispose()
			}
		},

		computed: {
			timeList() {
				return [{
						title: '今日'
					},
					{
						title: '本月'
					},
					{
						title: '自定义'
					},
				]
			}
		}


	}
</script>

<style scoped lang="scss">
	.profiling-gird {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 20rpx;


		.gird-item-value {
			font-size: 40rpx;
			line-height: 48rpx;
			margin: 12rpx 0;
		}
	}

	.change-type {
		min-width: 244rpx;
		max-width: 350rpx;
		height: 60rpx;
		border-radius: 12rpx;
		border: 1rpx solid #E0E0E0;
	}

	.ECharts-box {
		width: 100%;
		height: 400rpx;

		.chartContainer {
			width: 100%;
			height: 100%;
		}
	}

	.time-rom-box {
		height: 60rpx;
	}
</style>